<script setup lang="ts">
import { createTextVNode } from 'vue'
import type { Action } from '~/data/CardData'

const { t } = useI18n()

const globalProps = defineProps<{
  title: string
  description?: string
  action?: Array<Action>
  previous?: Array<{ label: string; link: string }>
  animated?: number
}>()

const renderOneLink = (act: Action) => {
  return h(
    'a',
    { class: 'btn text-sm ml-2 flex', href: act.url },
    [
      createTextVNode(t(act.label)),
      h(
        'div',
        {
          class: act.icon,
          style: { marginLeft: '0.25rem' },
        },
        {},
      ),
    ],
  )
}

const renderLinks = () => {
  return h('div', { class: 'flex' }, globalProps.action?.map(renderOneLink))
}

</script>

<template>
  <pure-card :title="title" ma :animated="animated">
    <template #header-extra>
      <render-links space-x-2 />
    </template>
    <p p-4 bg-zinc-50 dark:bg-zinc-900>
      {{ description }}
    </p>
    <template #footer>
      <details v-if="previous" p-4>
        <summary>
          {{ t('docs.previous') }}
        </summary>
        <ul>
          <li v-for="(p, i) in previous" :key="i" ml-4>
            <a :href="p.link" underline hover:color-teal-600>{{ p.label }}</a>
          </li>
        </ul>
      </details>
    </template>
  </pure-card>
</template>
